<template>
    <div class="err-page">
        <div class="err-page-content-con">
            <div class="err-page-content-con-img">
                <div class="img-element">
                    <img :src="img" alt=""/>
                </div>
            </div>
            <div class="err-page-content">
                <h1>
                    {{ code }}
                </h1>
                <div class="desc">{{ dec }}</div>
                <div class="act-btn">
                    <n-button type="primary" @click="backHome" style="color: #ffffff">返回主控台</n-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {toRefs} from "vue";
import {useRouter} from "vue-router";

const props = defineProps({
    code: String,
    img: String,
    dec: String,
})
const {code, img, dec} = toRefs(props);
const router = useRouter(); //当前路由
const backHome = () => {
    router.replace({name: "home"});
}
</script>

<style scoped lang="scss">
.err {
  &-page {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 150px;
  }

  &-page-content-con {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 500px;
    width: 100%;
  }

  &-page-content-con-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    width: 62.5%;
    padding-right: 152px;
    zoom: 1;

    .img-element {
      float: right;
      width: 100%;
      max-width: 500px;
      height: 500px;
      background-repeat: no-repeat;
      background-size: contain;

      img {
        max-width: 500px;
      }
    }
  }

  &-page-content {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;

    h1 {
      margin-bottom: 24px;
      color: #515a6e;
      font-weight: 600;
      font-size: 72px;
      line-height: 72px;
    }

    .desc {
      margin-bottom: 16px;
      color: #808695;
      font-size: 20px;
      line-height: 28px;
    }

    .timers {
      margin-bottom: 16px;
      font-size: 16px;
      color: #808695;
      line-height: 28px;

      span {
        width: 20px;
        display: flex;
        float: left;
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>